<template>
  <div>
    <van-field :name="formItem.name" :label="formItem.label">
      <template #input>
        <van-uploader
          :multiple="formItem.multiple"
          v-model="formItem.value"
          :accept="formItem.accept"
          :max-count="formItem.maxCount"
          :max-size="formItem.maxSize"
          :capture="formItem.capture"
          :after-read="afterRead"
          :before-delete="deleteUpload"
        />
      </template>
    </van-field>
  </div>
</template>

<script>
/**
 * 文件上传
 */
import { createNamespacedHelpers } from "vuex";
const { mapActions } = createNamespacedHelpers("fileupload");
export default {
  name: "van-field-fileupload",
  props: {
    formItem: {
      type: Object,
      default: {
        name: "",//表单name,相当于id
        label: "",//表单左侧文字
        value: [],//表单数据
        accept: "",//文件上传时，接受什么格式的文件
        multiple: false,//是否是多选
        maxCount: "9",//最大数量
        maxSize:"",//大小限制
        capture:""
      }
    }
  },
  methods: {
    ...mapActions(["startUploadFile", "deleteUploadedFile"]),
    isMultiple() {//判断是否是多选
      return this.formItem.multiple;
    },
    afterRead(file) {//上传文件
      this.startUploadFile({ file: file, multiple: this.isMultiple() });
    },
    deleteUpload(file) {//删除文件
      return this.deleteUploadedFile(file);
    }
  }
};
</script>
